<template>
	<view class="container">
		<view class="scroll-container">
			<scroll-view scroll-y class="scroll-view" :scroll-top="scrollTop" @scroll="onScroll"
				@touchstart="handleTouchStart" @touchend="handleTouchEnd" :scroll-with-animation="false"
				:style="{ height: visibleHeight + 'px' }">
				<view class="scroll-content">
					<view class="onlineList list-item" v-for="(i,n) in displayData" :id="'item-' + index"
						>
						<view class="" style="flex: 1;">
							<image :src="i.image.includes('http')?i.image:$config.domain+i.image" mode="aspectFit"></image> {{i.title}}
						</view>
						<view class="" style="width: 190rpx;font-size: 25rpx;">
							{{i.spec}}
						</view>
						<view class="" style="width: 128rpx;justify-content: center;">
							{{i.today_price}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getWinePrice
	} from "@/services/home.js";
	export default {
		data() {
			return {
				// 滚动核心参数
				scrollTop: 0,
				isScrolling: false,
				scrollInterval: null,
				scrollSpeed: 50, // 初始速度适中
				baseInterval: 20, // 稍长的间隔确保在小程序中稳定触发

				// 布局参数
				itemHeight: 50, // 列表项高度，默认值确保即使计算失败也能滚动
				visibleHeight: 300, // 可视区域高度，设置默认值
				groupHeight: 0, // 一组数据的总高度

				// 数据
				sourceData: [],
				displayData: [],
				
			};
		},

		mounted() {
			// 1. 初始化数据
			this.initData();

			// 2. 计算可视区域高度
			this.calculateVisibleHeight();

			// 3. 确保DOM渲染完成后计算元素高度并启动滚动
			this.$nextTick(() => {
				this.calculateItemHeight();
				// 强制延迟启动，确保所有计算完成
				setTimeout(() => {
					this.startAutoScroll();
				}, 300);
			});
		},

		onUnload() {
			this.stopAutoScroll();
		},

		methods: {
			// 初始化数据 - 确保有足够数据滚动
			initData() {
				getWinePrice().then(res => {
					console.log(res)
					this.sourceData = res.data
					this.displayData = [...this.sourceData, ...this.sourceData, ...this.sourceData];
				})
				// 生成足够多的列表项，确保超过可视区域

				// 三重数据确保无缝滚动

			},

			// 计算可视区域高度
			calculateVisibleHeight() {
				try {
					const sysInfo = uni.getSystemInfoSync();
					// 减去头部和底部区域高度
					this.visibleHeight = sysInfo.windowHeight - 50 - 60;
					// 确保高度合理
					if (this.visibleHeight < 200) this.visibleHeight = 200;
				} catch (e) {
					// 异常时使用默认值
					this.visibleHeight = 300;
				}
			},

			// 计算列表项高度
			calculateItemHeight() {
				// 使用选择器查询实际高度
				const query = uni.createSelectorQuery().in(this);
				query.select('#item-0').boundingClientRect(data => {
					if (data && data.height) {
						this.itemHeight = data.height;
					}
					// 计算一组数据的总高度
					this.groupHeight = this.sourceData.length * this.itemHeight;
				}).exec();
			},

			// 滚动逻辑
			scrollStep() {
				if (!this.isScrolling) return;

				// 计算滚动距离 - 简化计算确保稳定
				const speedFactor = (100 - this.scrollSpeed) / 100;
				const scrollDistance = 0.5 + (speedFactor * 1.5);

				// 更新滚动位置
				this.scrollTop += scrollDistance;

				// 无缝滚动重置 - 当滚动超过一组数据时
				if (this.groupHeight > 0 && this.scrollTop >= this.groupHeight) {
					this.scrollTop = this.scrollTop - this.groupHeight;
				}
			},

			// 开始自动滚动 - 修复核心
			startAutoScroll() {
				// 防止重复启动
				if (this.isScrolling || this.scrollInterval) return;

				this.isScrolling = true;

				// 使用setInterval确保稳定触发
				this.scrollInterval = setInterval(() => {
					// 强制更新DOM
					this.$nextTick(() => {
						this.scrollStep();
					});
				}, this.baseInterval);
			},

			// 停止自动滚动
			stopAutoScroll() {
				if (!this.isScrolling || !this.scrollInterval) return;

				this.isScrolling = false;
				clearInterval(this.scrollInterval);
				this.scrollInterval = null;
			},

			// 切换滚动状态
			toggleAutoScroll() {
				if (this.isScrolling) {
					this.stopAutoScroll();
				} else {
					this.startAutoScroll();
				}
			},

			// 调整滚动速度
			adjustSpeed(delta) {
				const newSpeed = Math.max(20, Math.min(90, this.scrollSpeed + delta));
				if (newSpeed !== this.scrollSpeed) {
					this.scrollSpeed = newSpeed;
				}
			},

			// 滚动到顶部
			scrollToTop() {
				this.scrollTop = 0;
			},

			// 处理用户手动滚动
			onScroll(e) {
				if (!this.isScrolling) {
					this.scrollTop = e.detail.scrollTop;
				}
			},

			// 触摸开始时停止滚动
			handleTouchStart() {
				this.stopAutoScroll();
			},

			// 触摸结束后恢复滚动
			handleTouchEnd() {
				setTimeout(() => {
					if (!this.isScrolling) {
						this.startAutoScroll();
					}
				}, 500);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 740rpx;
		
		overflow: hidden;
	}


	.scroll-container {
		flex: 1;
		width: 100%;
	}

	.scroll-view {
		width: 100%;
		overflow: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.scroll-content {
		width: 100%;
	}

	.list-item {
		height: 74rpx;
		line-height: 74rpx;
		
		/* border-bottom: 1px solid #eee; */
	 background-color: white;
	}

	/* 
.list-item:nth-child(even) {
  background-color: #f9f9f9;
} */


	.onlineList {
		height: 74rpx;
		display: flex;
		align-items: center;
		padding: 0 16rpx;
		transform: translateZ(0);
		font-size: 28rpx;
		color: #3D3D3D;

		view {
			display: flex;
			align-items: center;

		}

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
</style>